<template>
    <div class="main">
        <el-form>
            <el-form-item>
                <div style="display:inline-block">
                    <el-upload class="upload-demo" ref="upload" :action="action" :file-list="fileList"
                        :on-success="handleSuccess" accept=".xls,.xlsx" :limit="1">
                    </el-upload>
                </div>
                <el-button type="primary" @click="upexcel">导入</el-button>
                <el-button type="primary" @click="downexcel">下载清单模板</el-button>
                <el-button type="primary" @click="windowJy">EPC查询</el-button>
                <el-button type="primary" @click="getLpj">导入零配件价格列表</el-button>
            </el-form-item>
        </el-form>
        <div class="tableData">
            <el-table :data="tableData1" style="width: 100%" :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange1">
                <el-table-column label="">
                    <template slot="header">
                        零配件信息
                        <el-button type="danger" circle class="el-icon-delete" title="删除" size="mini" @click="delAll(1)">
                        </el-button>
                    </template>
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column type="selection" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="lbjmc" label="零配件名称" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.lbjmc" :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ycljh" label="原厂零件号" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.ycljh" :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价(元/个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.price" @change="onedj(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量(个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.count" @change="onesl(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额(元)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.amount" disabled></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <a @click="remark(1, scope.$index, scope.row.remark)">备注</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete" title="删除" size="mini"
                                @click="delComponent(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- <div class="addplus">
                        <span class="addspan">合计(元)：<input type="number" class="typehj" v-model="lbjhj" disabled></span>
                    </div> -->
            <div class="plus">
                <el-button type="primary" class="addBtn" icon="el-icon-plus" circle title="添加" @click="addComponent()"
                    size="mini">
                </el-button>
            </div>
        </div>
        <div class="tableData">
            <el-table :data="tableData2" style="width: 100%" :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange2">
                <el-table-column label="">
                    <template slot="header">
                        工时信息
                        <el-button type="danger" circle class="el-icon-delete" title="删除" size="mini" @click="delAll(2)">
                        </el-button>
                    </template>
                    <el-table-column type="index" label="序号" width="100" align="center">
                    </el-table-column>
                    <el-table-column type="selection" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="gz" label="工种" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.gz" :disabled="power">
                                <el-option label="喷漆" value="喷漆"></el-option>
                                <el-option label="拆装" value="拆装"></el-option>
                                <el-option label="钣金" value="钣金"></el-option>
                                <el-option label="电工" value="电工"></el-option>
                                <el-option label="机修" value="机修"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gsxm" label="工时项目" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.gsxm" :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="工时费(元)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.price" @change="two(scope.$index)"
                                :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <a @click="remark(2, scope.$index, scope.row.remark)">备注</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete" title="删除" size="mini"
                                @click="delWorkingHour(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- <div class="addplus">
                        <span class="addspan">合计(元)：<input type="number" class="typehj" v-model="gshj" disabled></span>
                    </div> -->
            <div class="plus">
                <el-button type="primary" class="addBtn" icon="el-icon-plus" circle title="添加" @click="addWorkingHour()"
                    size="mini">
                </el-button>
            </div>
        </div>
        <div class="tableData">
            <el-table :data="tableData3" style="width: 100%" :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange3">
                <el-table-column label="">
                    <template slot="header">
                        辅料信息
                        <el-button type="danger" circle class="el-icon-delete" title="删除" size="mini" @click="delAll(3)">
                        </el-button>
                    </template>
                    <el-table-column type="index" label="序号" width="100" align="center">
                    </el-table-column>
                    <el-table-column type="selection" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="xmmc" label="项目名称" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xmmc" :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价(元/个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.price" @change="threedj(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量(个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.count" @change="threesl(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额(元)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.amount" disabled></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <a @click="remark(3, scope.$index, scope.row.remark)">备注</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete" title="删除" size="mini"
                                @click="delAccessory(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- <div class="addplus">
                        <span class="addspan">合计(元)：<input type="number" class="typehj" v-model="flhj" disabled></span>
                    </div> -->
            <div class="plus">
                <el-button type="primary" class="addBtn" icon="el-icon-plus" circle title="添加" @click="addAccessory()"
                    size="mini">
                </el-button>
            </div>
        </div>

        <div class="tableData">
            <el-table :data="tableData4" style="width: 100%" :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange4">
                <el-table-column label="">
                    <template slot="header">
                        残值信息
                        <el-button type="danger" circle class="el-icon-delete" title="删除" size="mini" @click="delAll(4)">
                        </el-button>
                    </template>
                    <el-table-column type="index" label="序号" width="100" align="center">
                    </el-table-column>
                    <el-table-column type="selection" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="xmmc" label="项目名称" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xmmc" :disabled="power"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价(元/个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.price" @change="fourdj(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量(个)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.count" @change="foursl(scope.$index)"
                                :disabled="power">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额(元)" align="center">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.amount" disabled></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <a @click="remark(4, scope.$index, scope.row.remark)">备注</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete" title="删除" size="mini"
                                @click="delResidualValue(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- <div class="addplus">
                        <span class="addspan">合计(元)：<input type="number" class="typehj" v-model="czhj" disabled></span>
                    </div> -->
            <div class="plus">
                <el-button type="primary" class="addBtn" icon="el-icon-plus" circle title="添加" @click="addResidualValue()"
                    size="mini">
                </el-button>
            </div>
        </div>
        <div class="tableData">
            <el-table :data="tableData5" style="width: 100%" :cell-style="{ textAlign: 'center' }">
                <el-table-column label="合计">
                    <el-table-column prop="type" label="类型" align="center">
                    </el-table-column>
                    <el-table-column prop="lbjhj" label="零配件小计" align="center">
                    </el-table-column>
                    <el-table-column prop="gshj" label="工时小计" align="center">
                    </el-table-column>
                    <el-table-column prop="flhj" label="辅料小计" align="center">
                    </el-table-column>
                    <el-table-column prop="czhj" label="残值小计" align="center">
                    </el-table-column>
                    <el-table-column prop="hj" label="合计" align="center">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="dataAll">
                    <span>合计：<input type="number" class="hj" v-model="hj" disabled> -->
        <!-- <span slot="suffix">元</span> -->
        <!-- </span>
                </div> -->
        <div class="but">
            <el-button v-if="!power" type="primary" @click="submit()">保存
            </el-button>
            <el-button v-if="power" type="primary" @click="next()">下一页
            </el-button>
        </div>
        <remark ref="Remark" v-if="show" :show="show" :power="this.power" @dialogClose="dialogClose" @dialog="dialog"
            :text="text"></remark>
        <EPC ref="EpcRef" v-if="epcShow" :epcShow="epcShow" @dialogClose="dialogClose" @gettable="gettable"></EPC>
    </div>
</template>

<script>
import { saveSsqd, selectById } from '@/api/evaluation/newBusiness'
import Remark from './remark.vue'
import EPC from './epc.vue'
export default {
    props: {
        ywid: {
            type: Number
        },
        ywzt: {
            type: String
        }
    },
    components: {
        Remark,
        EPC
    },
    data () {
        return {
            action: '',
            fileList: [],
            power: false,
            show: false,
            epcShow: false,
            text: '',
            index: '',
            x: '',//记录某个列表的remark
            deleteArr1: [],
            deleteArr2: [],
            deleteArr3: [],
            deleteArr4: [],
            tableData5: [{
                type: '定损合计',
                hj: "",
                lbjhj: "",
                flhj: "",
                czhj: "",
                gshj: "",
            }],
            tableData: [],
            tableData1: [
                {
                    lbjmc: "",
                    ycljh: "",
                    price: '',
                    count: '',
                    amount: '',
                    remark: ""
                }
            ],
            tableData2: [
                {
                    gz: "",
                    gsxm: "",
                    price: '',
                    remark: ""
                },
            ],
            tableData3: [
                {
                    xmmc: "",
                    price: '',
                    count: '',
                    amount: '',
                    remark: ""
                }
            ],
            tableData4: [
                {
                    xmmc: "",
                    price: '',
                    count: '',
                    amount: '',
                    remark: ""
                }
            ],
        }
    },
    methods: {
        gettable () {
            // this.tableData1 = this.tableData
            this.tableData1 = this.$refs.EpcRef.table
        },
        windowJy () {
            let newPage = this.$router.resolve({ path: '/EPC' })
            window.open(newPage.href, '_blank')
        },
        getLpj () {
            this.epcShow = true
        },
        remark (x, index, text) {
            this.show = true
            this.text = text
            this.index = index
            this.x = x
        },
        dialogClose () {
            this.show = false
            this.epcShow = false
        },
        dialog () {
            this.show = false
            if (this.x == 1) {
                this.tableData1[this.index].remark = this.$refs.Remark.jilu()
            } else if (this.x == 2) {
                this.tableData2[this.index].remark = this.$refs.Remark.jilu()
            } else if (this.x == 3) {
                this.tableData3[this.index].remark = this.$refs.Remark.jilu()
            } else if (this.x == 4) {
                this.tableData4[this.index].remark = this.$refs.Remark.jilu()
            }

        },
        delComponent (index) {
            this.tableData1.splice(index, 1);
            this.all()
        },
        delWorkingHour (index) {
            this.tableData2.splice(index, 1);
            this.all()
        },
        delAccessory (index) {
            this.tableData3.splice(index, 1);
            this.all()
        },
        delResidualValue (index) {
            this.tableData4.splice(index, 1);
            this.all()
        },

        addComponent () {
            this.tableData1.push({
                lbjmc: "",
                ycljh: "",
                price: '',
                count: '',
                amount: '',
                remark: ""
            });
        },
        addWorkingHour () {
            this.tableData2.push({
                gz: "",
                gsxm: "",
                price: '',
                remark: ""
            });
        },
        addAccessory () {
            this.tableData3.push({
                xmmc: "",
                price: '',
                count: '',
                amount: '',
                remark: ""
            });
        },
        addResidualValue () {
            this.tableData4.push({
                xmmc: "",
                price: '',
                count: '',
                amount: '',
                remark: ""
            });
        },
        onedj (index) {
            if (this.tableData1[index].price && this.tableData1[index].count) {
                this.tableData1[index].amount = this.NumberMul(this.tableData1[index].price, this.tableData1[index].count)
            }
            else {
                this.tableData1[index].amount = 0
            }
            this.all()
        },
        onesl (index) {
            if (this.tableData1[index].price && this.tableData1[index].count) {
                this.tableData1[index].amount = this.NumberMul(this.tableData1[index].price, this.tableData1[index].count)
            } else {
                this.tableData1[index].amount = 0
            }
            this.all()
        },
        two (index) {
            if (this.tableData2[index].price) {
                this.all()
            } else {
                this.tableData2[index].price = 0
            }
        },
        threedj (index) {
            if (this.tableData3[index].price && this.tableData3[index].count) {
                this.tableData3[index].amount = this.NumberMul(this.tableData3[index].price, this.tableData3[index].count)
            }
            else {
                this.tableData3[index].amount = 0
            }
            this.all()
        },
        threesl (index) {
            if (this.tableData3[index].price && this.tableData3[index].count) {
                this.tableData3[index].amount = this.NumberMul(this.tableData3[index].price, this.tableData3[index].count)
            }
            else {
                this.tableData3[index].amount = 0
            }
            this.all()
        },
        fourdj (index) {
            if (this.tableData4[index].price && this.tableData4[index].count) {
                this.tableData4[index].amount = this.NumberMul(this.tableData4[index].price, this.tableData4[index].count)
            }
            else {
                this.tableData4[index].amount = 0
            }
            this.all()
        },
        foursl (index) {
            if (this.tableData4[index].price && this.tableData4[index].count) {
                this.tableData4[index].amount = this.NumberMul(this.tableData4[index].price, this.tableData4[index].count)
            }
            else {
                this.tableData4[index].amount = 0
            }
            this.all()
        },
        all () {
            this.tableData5[0].lbjhj = 0
            this.tableData5[0].flhj = 0
            this.tableData5[0].czhj = 0
            this.tableData5[0].gshj = 0
            if (this.tableData1) {
                for (var i = 0; i < this.tableData1.length; i++) {
                    this.tableData5[0].lbjhj = this.NumberAdd(this.tableData5[0].lbjhj, this.tableData1[i].amount)
                }
            }
            if (this.tableData2) {
                for (var i = 0; i < this.tableData2.length; i++) {
                    this.tableData5[0].gshj = this.NumberAdd(this.tableData5[0].gshj, this.tableData2[i].price)

                }
            }

            if (this.tableData3) {
                for (var i = 0; i < this.tableData3.length; i++) {
                    this.tableData5[0].flhj = this.NumberAdd(this.tableData5[0].flhj, this.tableData3[i].amount)
                }
            }

            if (this.tableData4) {
                for (var i = 0; i < this.tableData4.length; i++) {
                    this.tableData5[0].czhj = this.NumberAdd(this.tableData5[0].czhj, this.tableData4[i].amount)
                }
            }
            let sum1 = this.NumberAdd(this.tableData5[0].lbjhj, this.tableData5[0].gshj)
            let sum2 = this.NumberAdd(sum1, this.tableData5[0].flhj)
            this.tableData5[0].hj = this.NumberSub(sum2, this.tableData5[0].czhj)
        },
        submit () {
            var obj = {}
            obj.ywid = this.ywid
            if (this.tableData1.length == 0) {
                obj.lbj = [
                    {
                        lbjmc: "零部件名称",
                        ycljh: "原厂零件号",
                        price: 0,
                        count: 0,
                        amount: 0,
                        remark: "备注"
                    }
                ]
            } else {
                obj.lbj = this.tableData1
            }

            if (this.tableData2.length == 0) {
                obj.gs = [{
                    gz: "工种",
                    gsxm: "工时项目",
                    price: 0,
                    remark: "备注"
                }]
            } else {
                obj.gs = this.tableData2
            }
            if (this.tableData3.length == 0) {
                obj.fl = [{
                    xmmc: "项目名称",
                    price: 0,
                    count: 0,
                    amount: 0,
                    remark: "备注"
                }]
            } else {
                obj.fl = this.tableData3
            }
            if (this.tableData4.length == 0) {
                obj.cz = [{
                    xmmc: "项目名称",
                    price: 0,
                    count: 0,
                    amount: 0,
                    remark: "备注"
                }]
            } else {
                obj.cz = this.tableData4
            }
            obj.hj = this.tableData5[0].hj
            obj.lbjHj = this.tableData5[0].lbjhj
            obj.gsHj = this.tableData5[0].gshj
            obj.flHj = this.tableData5[0].flhj
            obj.czHj = this.tableData5[0].czhj
            saveSsqd(obj).then((res) => {
                this.$message.success('保存成功！')
                this.$emit('nextTab');
            })
        },
        next () {
            this.$emit('nextTab');
        },
        gettest () {
            selectById('id=' + this.ywid).then((res) => {

                this.tableData1 = res.data.ssqdLbj

                this.tableData2 = res.data.ssqdGs

                this.tableData3 = res.data.ssqdFl

                this.tableData4 = res.data.ssqdCz

                this.tableData5[0].hj = res.data.jcxx.ssqdHj
                this.tableData5[0].lbjhj = res.data.jcxx.lbjHj
                this.tableData5[0].gshj = res.data.jcxx.gsHj
                this.tableData5[0].flhj = res.data.jcxx.flHj
                this.tableData5[0].czhj = res.data.jcxx.czHj
            })
        },
        handleSuccess (file, fileList) {
            fileList = []
            this.fileList = []
            this.gettest()
        },
        upexcel () {
            this.$confirm("导入文件将覆盖原来的数据！", "导入excel文件", {
                comfirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.action = '/api/jdcpg/yw/ssqdExcelImport?ywid=' + this.ywid
                this.$refs['upload'].$refs['upload-inner'].handleClick()
                return true
            }).catch(() => {
                return false
            })
        },
        downexcel () {
            window.location.href = "/api/download/common/ssqd.xlsx"
        },
        handleSelectionChange1 (val) {
            this.deleteArr1 = val
        },
        handleSelectionChange2 (val) {
            this.deleteArr2 = val
        },
        handleSelectionChange3 (val) {
            this.deleteArr3 = val
        },
        handleSelectionChange4 (val) {
            this.deleteArr4 = val
        },
        delAll (index) {
            if (index == 1) {
                this.delMethods(this.deleteArr1, this.tableData1)
            } else if (index == 2) {
                this.delMethods(this.deleteArr2, this.tableData2)
            } else if (index == 3) {
                this.delMethods(this.deleteArr3, this.tableData3)
            } else if (index == 4) {
                this.delMethods(this.deleteArr4, this.tableData4)
            }
            this.all()
        },
        delMethods (delArr, tableArr) {
            for (let i = 0; i < delArr.length; i++) {
                for (let j = 0; j < tableArr.length; j++) {
                    if (delArr[i] == tableArr[j]) {
                        tableArr.splice(j, 1)
                        break
                    }
                }
            }
        },

    },
    // mounted () {
    // },
    activated () {
        if (localStorage.getItem('role') == '高级评估师' || localStorage.getItem('role') == '企业管理员') {
            this.power = true
        }
        this.gettest()
    }
}
</script>

<style scoped lang="less">
.el-form {
    margin-left: 10px;
    padding: 25px 10px 10px 10px;
}

.main {
    background-color: #fff;
}


.addplus {
    width: 100%;
    height: 45px;
    padding: 8px 25px;
    background-color: #F5F7FA;
    text-align: left;
    color: #606266;
    font-family: cursive;
    font-weight: 600;
}

.plus {
    width: 100%;
    height: 45px;
    padding: 8px;
    border: 1px solid #EBEEF5;
    text-align: center;
    margin-bottom: 20px;
}

span {
    font-size: 14px;
}

.hj {
    width: 20%;
    color: #606266;
    background-color: #fff;
    border: none;
}

.typehj {
    width: 20%;
    color: #606266;
    background-color: #F5F7FA;
    padding: 10px;
    border: none;
    margin-left: 15px;
}

.addspan {
    font-size: 14px;
}

.but {
    text-align: right;
    background-color: #fff;
    margin-left: 10px;
    padding-right: 40px;
}

.tableData {
    width: 90%;
    margin: 20px auto 60px;
}

.dataAll {
    width: 90%;
    margin: 20px auto 10px;
}

:deep .el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
    border-top: 1px solid #d6d6d6;
}

:deep input::-webkit-outer-spin-button,
:deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

:deep input[type="number"] {
    -moz-appearance: textfield;
}

:deep .el-input--medium .el-input__inner {
    text-align: center;
    color: #606266;
}

a {
    color: blue;
}

:deep .el-table--medium .el-table__cell {
    // padding: 10px 15px;
    padding-left: 10px;
    padding-right: 10px;
}
</style>